<script>
export default {
    setup() {

    },
}
</script>

<template>
    <div class="vip_box">
        <div class="container">
            <div class="top">
                <span class="iconfont icon-arrow-left"></span>
                <p>加入听书会原</p>
            </div>
            <div class="vip_main">
                <div class="top_item">
                    <div class="left">
                        <div class="image">
                            <img src="" alt="">
                        </div>
                        <div class="name">
                            <p>吃瓜子者</p>
                            <span>您还不是会员</span>
                        </div>
                    </div>
                    <div class="right">
                        <p>听书</p>
                        <p>会员</p>
                    </div>
                </div>
                <div class="bottom_item">
                    加入听书VIP<span>·</span>经典名著任意听
                </div>
            </div>
            <div class="vip_content">
                <div class="vip_mag">
                    <ul>
                        <li>
                            <div class="image">
                                <img src="../assets/imgs/vip/privilege1_dark.png" alt="">
                            </div>
                            <p>看书免广告</p>
                        </li>
                        <li>
                            <div class="image">
                                <img src="../assets/imgs/vip/privilege2_dark.png" alt="">
                            </div>
                            <p>听书免广告</p>
                        </li>
                        <li>
                            <div class="image">
                                <img src="../assets/imgs/vip/privilege3_dark.png" alt="">
                            </div>
                            <p>每周更新</p>
                        </li>
                        <li>
                            <div class="image">
                                <img src="../assets/imgs/vip/privilege4_dark.png" alt="">
                            </div>
                            <p>返现收益</p>
                        </li>

                    </ul>
                </div>
                <div class="vip_mag">
                    <ul>
                        <li>
                            <div class="image">
                                <img src="../assets/imgs/vip/awp.webp" alt="">
                            </div>
                            <p>尊贵标识冠</p>
                        </li>
                        <li>
                            <div class="image">
                                <img src="../assets/imgs/vip/privilege6_dark.png" alt="">
                            </div>
                            <p>尊贵标识冠</p>
                        </li>
                        <li>
                            <div class="image">
                                <img src="../assets/imgs/vip/privilege5_dark.png" alt="">
                            </div>
                            <p>去除广告</p>
                        </li>
                        <li>
                            <div class="image">
                                <img src="../assets/imgs/vip/privilege1_dark.png" alt="">
                            </div>
                            <p>除免广告</p>
                        </li>

                    </ul>
                </div>
            </div>
            <div class="nian">
                <div class="many_box">
                    <div class="many cons">
                        <div class="vip">年度VIP</div>
                        <div class="money">￥<span>198.0</span></div>
                        <p>每天仅0.54元</p>
                    </div>
                    <div class="many">
                        <div class="vip">季度VIP</div>
                        <div class="money">￥<span>68.0</span></div>
                        <p>每天仅0.75元</p>
                    </div>
                </div>
                <div class="gou">· 购买会员即为同意<span>《典读听书会员服务协议》</span></div>


                <div class="button">
                    <p>198元立即开通</p>
                    <span>到期自动续费16元/月，可随时取消</span>
                </div>
            </div>

        </div>
    </div>
</template>

<style lang="scss">
@import "../assets/font-two/iconfont.css";

.vip_box {
    // width: 100%;
    background-color: #2f3540;

    .top {
        padding: 0 16px;
        padding-top: 25px;
        color: #fff;
        display: flex;
        align-items: baseline;

        .icon-arrow-left {
            font-size: 20px;
        }

        p {
            text-align: center;
            font-size: 18px;
            margin-left: 96px;
        }
    }

    .vip_main {
        width: 345px;
        background: linear-gradient(90deg, #fbf0cf, #fddb99);
        margin: 0 16px;
        border-radius: 10px;
        margin-top: 30px;

        .top_item {
            display: flex;
            padding: 24px 16px;
            justify-content: space-between;
            align-items: center;

            .left {
                display: flex;
                align-items: center;

                .image {
                    width: 45px;
                    height: 45px;
                    background-color: red;
                    border-radius: 50%;
                    overflow: hidden;
                    margin-right: 10px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .name {
                    p {
                        color: #765f24;
                    }

                    span {
                        margin-top: 10px;
                        color: #d3bb90;
                        font-size: 12px;
                    }
                }
            }

            .right {
                color: #caa35d;
                margin-right: 22px;

                p {
                    margin-bottom: 6px;
                }
            }
        }

        .bottom_item {
            text-align: center;
            color: #cdaf75;
            font-size: 15px;
            padding-bottom: 23px;

            span {
                margin: 0 14px;
            }
        }
    }

    .vip_content {
        margin-top: 20px;

        .vip_mag {
            padding: 0 35px;

            ul {

                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                align-items: center;

                li {
                    display: flex;
                    align-items: center;
                    flex-direction: column;
                    margin-bottom: 20px;

                    .image {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        overflow: hidden;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    p {
                        font-size: 12px;
                        margin-top: 12px;
                        text-align: center;
                        color: #efe5c9;
                    }
                }
            }
        }
    }

    .nian {

        background-color: #fff;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        padding: 0 15px;
        padding-bottom: 14px;

        .many_box {
            display: flex;
            justify-content: space-between;
            padding-top: 20px;
        }

        .many {
            text-align: center;
            width: 162px;
            // height: 100px;
            border: 1px solid #eee;
            padding-top: 15px;
            padding-bottom: 10px;
            border-radius: 5px;

            .money {
                color: red;
                margin-top: 10px;

                span {
                    font-size: 25px;
                }
            }

            p {
                font-size: 12px;
                color: #a8a8a8;
            }
        }
        .cons{
            border: 1px solid #e0d1a5;
            background-color: #f9f9ec;
            position: relative;
            .vip{
                color: #baaf74;
            }
            &::after{
                content: "超值";
                width: 40px;
                height: 22px;
                text-align: center;
                background:linear-gradient(90deg,#f9a691,#e55e3e) ;
                color: #fff;
                font-size: 10px;
                position: absolute;
                top: 0;
                left: 0;
                border-top-left-radius: 5px;
                border-bottom-right-radius: 10px;
                line-height: 22px;
            }
        }
        .gou{
            font-size: 12px;
            color: #c3c3c3;
            margin-top: 10px;
            span{
                color: #eac16f;
            }
        }
        .button{
            text-align: center;
            width: 90%;
            border-radius: 30px;
            margin: 0 auto;
            background-color: #2f3540;
            margin-top: 30px;
            padding: 5px 0;
            p{
                color: #f0e4ce;
                font-size: 15px;
            }
            span{
                color: #958f83;
                font-size: 10px;
            }
        }
    }
}
</style>